import React from 'react';
import { Collapse, Empty, Divider, Space, Typography } from 'antd';
import { DatabaseOutlined } from '@ant-design/icons';
import { ExperimentDataCategory } from '../../types';
import { ChartViewMode } from '../charts/types';
import ScalarDataSection from './ScalarDataSection';
import SeriesDataSection from './SeriesDataSection';

const { Text, Title } = Typography;

interface CategorySectionProps {
  category: ExperimentDataCategory;
  experimentId: number;
  experimentName?: string;
  seriesDataMap: Record<number, {
    loading: boolean;
    data: any[];
    columns: Array<{ name: string; type: string }>;
    totalRows: number;
    currentPage: number;
    pageSize: number;
    hasMore: boolean;
  }>;
  getSeriesViewMode: (seriesId: number) => ChartViewMode;
  updateSeriesViewMode: (seriesId: number, updates: Partial<ChartViewMode>) => void;
  onLoadSeriesData: (seriesId: number, page?: number, pageSize?: number) => void;
  onSeriesExpand: (seriesIds: (string | number)[]) => void;
  activeKey?: string | string[];
  onChange?: (key: string | string[]) => void;
  expandedSeriesKeys?: (string | number)[];
}

const CategorySection: React.FC<CategorySectionProps> = ({
  category,
  experimentId,
  experimentName,
  seriesDataMap,
  getSeriesViewMode,
  updateSeriesViewMode,
  onLoadSeriesData,
  onSeriesExpand,
  activeKey,
  onChange,
  expandedSeriesKeys,
}) => {
  const hasScalarData = category.scalar_data && Array.isArray(category.scalar_data) && category.scalar_data.length > 0;
  const hasSeriesData = category.series_data && Array.isArray(category.series_data) && category.series_data.length > 0;

  const categoryKey = `category-${category.id}`;
  const isActive = activeKey 
    ? (Array.isArray(activeKey) ? activeKey.includes(categoryKey) : activeKey === categoryKey)
    : false;

  const collapseItems = [
    {
      key: categoryKey,
      label: (
        <Title level={4} style={{ margin: 0, fontWeight: 600, fontSize: '16px', color: '#262626' }}>
          <DatabaseOutlined style={{ marginRight: 8 }} />
          {category.name}
          {category.description && (
            <Text type="secondary" style={{ fontSize: '14px', fontWeight: 'normal', marginLeft: 8 }}>
              {category.description}
            </Text>
          )}
        </Title>
      ),
      children: (
        <div style={{ paddingTop: '24px', paddingBottom: '24px', paddingLeft: '24px', paddingRight: '24px' }}>
          {/* 单值数据 */}
          {hasScalarData && (
            <ScalarDataSection scalarData={category.scalar_data!} />
          )}

          {/* 序列数据 */}
          {hasSeriesData && (
            <>
              {hasScalarData && <Divider />}
              <SeriesDataSection
                seriesData={category.series_data!}
                experimentId={experimentId}
                experimentName={experimentName}
                category={category}
                seriesDataMap={seriesDataMap}
                getSeriesViewMode={getSeriesViewMode}
                updateSeriesViewMode={updateSeriesViewMode}
                onLoadSeriesData={onLoadSeriesData}
                onSeriesExpand={onSeriesExpand}
                expandedSeriesKeys={expandedSeriesKeys}
              />
            </>
          )}

          {!hasScalarData && !hasSeriesData && (
            <Empty description="该分类下暂无数据" />
          )}
        </div>
      ),
    },
  ];

  return (
    <div id={`category-${category.id}`} style={{ marginBottom: 16 }}>
      <Collapse
        items={collapseItems}
        activeKey={isActive ? categoryKey : undefined}
        onChange={onChange}
        style={{
          background: '#fff',
          border: '1px solid #e8e8e8'
        }}
      />
    </div>
  );
};

export default CategorySection;

